<!--
 * @Description: 
 * @Author: 胡涛
 * @Date: 2023-11-05 23:05:09
 * @LastEditors: 胡涛
 * @LastEditTime: 2023-11-10 14:12:11
-->
<template>
  <a-modal
    :open="visible"
    title="个人资料信息"
    :keyboard="false"
    :maskClosable="false"
    @cancel="onCancel"
    @ok="onSubmit"
    :confirmLoading="submitLoading"
    :footer="false"
    :width="800"
  >
    <a-form :model="formModel" :="formLayout" :rules="rules">
      <a-row>
        <a-col :span="12">
          <a-form-item label="用户名" prop="userName">
            <a-input v-model:value="formModel.userName" disabled></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="姓名" prop="name">
            <a-input v-model:value="formModel.name" disabled></a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-item label="手机号" prop="phoneNumber">
            <a-input v-model:value="formModel.phoneNumber" disabled></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="邮箱" prop="email">
            <a-input v-model:value="formModel.email" disabled></a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-item label="性别" prop="gender">
            <a-input v-model:value="formModel.gender" disabled></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="出生年月" prop="brithday">
            <a-input v-model:value="formModel.brithday" disabled></a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-item label="民族" prop="nation">
            <a-input v-model:value="formModel.nation" disabled></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="籍贯" prop="nativePlace">
            <a-input v-model:value="formModel.nativePlace" disabled></a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-item label="地址" prop="address">
            <a-input v-model:value="formModel.address" disabled></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="个性签名" prop="personalSignature">
            <a-input
              v-model:value="formModel.personalSignature"
              disabled
            ></a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-item label="人事行业" prop="personnelIndustry">
            <a-input
              v-model:value="formModel.personnelIndustry"
              disabled
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="学历" prop="education">
            <a-input v-model:value="formModel.education" disabled></a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-form-item label="个人简介" prop="introduction" :="rowLayout">
        <a-textarea
          v-model:value="formModel.introduction"
          disabled
          :rows="4"
        ></a-textarea>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { RuleObject } from "ant-design-vue/es/form/interface";
import { SystemUserDto } from "@/api/system/types";
import { useAppStore } from "@/store";
const props = defineProps({ visible: { type: Boolean, required: true } });
const emits = defineEmits(["update:visible"]);
const submitLoading = ref(false);

/**
 * 表单布局方式
 */
const formLayout = {
  labelCol: { span: 6 },
  labelAlign: "right",
  wrapperCol: { span: 16 },
};

const rowLayout = {
  labelCol: { span: 3 },
  labelAlign: "right",
  wrapperCol: { span: 20 },
};

const formModel: SystemUserDto = {} as any;

/**
 * 验证规则
 */
const rules: Record<string, Array<RuleObject>> = {};

onMounted(() => {
  Object.assign(formModel, { ...useAppStore().currentUser });
});

const onCancel = () => {
  emits("update:visible", false);
};

/**
 *
 */
const onSubmit = () => {};
</script>

<style lang="less" scoped></style>
